<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  正在测试cookie的封装
</body>
<script>

  // - 增：cookie.setItem("key", "val", {})
  // - 删：cookie.removeItem("key", {})
  // - 查：cookie.getItem("key")

  const cookie = {
    setItem(key, val, ops={}){
      // 配置路径
      let p = "";
      if(ops.path){
        p = ";path=" + ops.path;
      }
      // 配置有效期
      let e = "";
      if(ops.expires){
        const d = new Date();
        d.setDate( d.getDate() + ops.expires );
        e = ";expires="+d;
      }
      // 设置cookie
      document.cookie = `${key}=${val}${p}${e}`;
    },
    removeItem(key, ops={}){
      // 所谓删除，其实就是设置相同的key和路径，过去的日期
      this.setItem(key, "", {expires: -1, ...ops});
    },
    getItem(key){
      // 将cookie的总值，分割成独立的cookie键值
      const arr = document.cookie.split("; ");
      // 遍历分割之后的cookie
      for(let i=0;i<arr.length;i++){
        // 将cookie的名和值，再次分割
        const c = arr[i].split("=");
        // 判断cookie的名是否和传入的key相同
        if(c[0] === key){
          // 返回对应的值
          return c[1];
        }
      }
      // 遍历结束后，如果还没有返回，说明没有找到符合的cookie，返回null
      return null;
    }
  }


  // 增
  // cookie.setItem("a", "10")
  // cookie.setItem("key", "val", {})
  // cookie.setItem("name", "admin", {path:"/"})
  // cookie.setItem("age", "18", {expires:3})
  // cookie.setItem("msg", "hahaha", {path:"/", expires:7})

  // 改
  // cookie.setItem("age", "20", {expires: 7})
  
  // 删
  // cookie.removeItem("key")
  // cookie.removeItem("msg", {path: "/"})

  // 查
  console.log(document.cookie);

  console.log(cookie.getItem("a"));
  console.log(cookie.getItem("msg"));
  console.log(cookie.getItem("name"));
  console.log(cookie.getItem("age"));
  console.log(cookie.getItem("key"));
  console.log(cookie.getItem("abc"));


</script>
</html>